var PersonCapacitySearchForm = function () {
  var template = /* html */ `
    <div class="personcapacity-search-form">
      <el-form inline label-width="70px" size="medium">
        <el-form-item v-if="[1,2].indexOf(search.searchType)!==-1" :label="search.searchType===1?'部门':'部门车间'">
          <div class="search-input">{{deptWorkName}}</div>
        </el-form-item>

        <el-form-item label="月份">
          <el-date-picker v-model="search.month" type="month" value-format="timestamp" :editable="false" :clearable="false" format="yyyy-MM"
            placeholder="请选择月份" class="search-input">
          </el-date-picker>
        </el-form-item>

        <el-form-item v-for="item in fields" :key="'search_'+item.field" :label="inputPlaceholder[item.field]">
          <board-select clearable has-option-when-null v-model="search[item.field]" class="search-input" :value-key="item.valueField"
            :value-field="item.valueField" :label-field="item.labelField" :placeholder="'请选择'+inputPlaceholder[item.field]"
            :options="vm[item.field+'List']" @visible-change="function(visible){visibleChange(visible,item)}">
            <template slot-scope="scope">
              <template v-for="option in scope.options">
                <el-option :key="option[item.valueField]" :value="option" :label="option[item.labelField]"></el-option>
              </template>
            </template>
          </board-select>
        </el-form-item>

        <el-form-item label="报工方式">
          <el-select clearable v-model="search.type" class="search-input" placeholder="请选择报工方式">
            <el-option v-for="item in typeList" :key="'type_'+item.value" :value="item.value" :label="item.label"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div style="text-align:center">
        <el-button type="primary" @click="searchData">查询</el-button>
      </div>
    </div>
  `;

  return {
    mixins: [linkageSelectMixin('dropdownData')],

    props: {
      search: {
        type: Object,
        required: true
      },
      dropdownData: {
        type: Array,
        default: function () {
          return [];
        }
      },
      deptWorkName: {}
    },

    data: function () {
      var vueData = {
        typeList: PersonCapacityInfoSearch.getTypeList([1, 2]),
        inputPlaceholder: {
          dept: "部门",
          workshop: "车间",
          processObj: "工序",
          user: "姓名"
        }
      };
      var fields = [];
      var search = this.search;
      var searchType = search.searchType;
      if ([0, 1].indexOf(searchType) !== -1) {
        if (searchType === 0) {
          fields.push({
            field: 'dept',
            valueDataField: 'dept.deptId',
            valueField: 'deptId',
            labelField: 'deptName'
          });
        }
        fields.push({
          field: 'workshop',
          valueDataField: 'workshop.workshopId',
          valueField: 'workshopId',
          labelField: 'workshopName'
        });
      }

      fields.push({
        field: 'processObj',
        valueDataField: 'processObj.processId',
        valueField: 'processId',
        labelField: 'processName'
      }, {
        field: 'user',
        valueDataField: 'user.userId',
        valueField: 'userId',
        labelField: 'userName'
      });
      this.setDropdownData(vueData, fields);
      return vueData;
    },

    methods: {
      searchData: function () {
        this.$emit('search-data', this.search);
      }
    },

    components: {
      BoardSelect: BoardSelect
    },

    template: template
  };
}();
